<template>
  <div>
    <video ref="vd" id="video" autoplay playsinline style="width: 200px;height: 200px"></video>
    <canvas id="videoCanvas" width="200" height="200"></canvas>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Index extends Vue {
  private vdstate = false
  private init() {
    const video = document.getElementById('video') as HTMLVideoElement
    const canvas = document.getElementById('videoCanvas') as HTMLCanvasElement
    const context = canvas.getContext('2d') as CanvasRenderingContext2D
    // 绘制画面
    context.drawImage(video, 0, 0, 200, 200)
    const base64Data = canvas.toDataURL('image/jpg')
    console.log(base64Data)
  }
  private initCanvas() {
    const constraints = {
      video: {
        width: {
          min: 1280
        },
        height: {
          min: 720
        }
      },
      audio: true
    }

    const video = document.getElementById('video') as HTMLVideoElement

    navigator.mediaDevices.getUserMedia(constraints).then(stream => {
      video.srcObject = stream
    })
  }
  mounted() {
    this.initCanvas()
  }
}
</script>

<style></style>
